<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>

				<!-- <view class="j-txt" @click="wordLogin" v-if="setPassWordType == 1">
					跳过
				</view> -->
			</view>
		</view>

		<view class="main">
			<image src="../../static/img/sign-02.png" class="banner"></image>

			<view class="bar-im">
				<view class="bar-tit">
					<image src="../../static/img/sign-03.png"></image>设置密码
				</view>
				<view class="bar-num">
					<input type="password" v-model="password" placeholder="请设置密码">
				</view>
			</view>

			<view class="bar-im">
				<view class="bar-tit">
					<image src="../../static/img/sign-03.png"></image>确认密码
				</view>
				<view class="bar-num">
					<input type="password" v-model="conPsd" placeholder="请再次输入密码">
				</view>
			</view>

			<view class="foot-btn" @click="next()">
				<view>
					{{ setPassWordType ? '完成' : '下一步' }}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { throttle } from '@/utils/common.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	import { worldLoginApi } from '@/api/api.js'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				conPsd: '',
				setPassWordType: '',
				words: ''
			}
		},
		mixins: [navBarMixin],
		methods: {
			back() {
				uni.navigateBack()
			},
			async wordLogin(e) {
				const { deviceId } = uni.getSystemInfoSync();
				
				const psd = e ? this.password : ''
				
				const res = await worldLoginApi({
					deviceId,
					words: this.words,
					password: psd
				})

				if (!res.code) {
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('refreshToken', res.data.refreshToken)
					uni.setStorageSync('userNo', res.data.userNo)
					getApp().init()
					
					setTimeout(() => {
						uni.switchTab({
							// url: '/pages/chat/chat'
							url: '/pages/me/index'
						})
					},3000)
				}else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

				// console.log('走入登录')
			},

			next() {


				throttle(() => {
					if (!this.password) {
						uni.showToast({
							title: '请设置密码',
							icon: 'none',
						})
						return
					}

					if (!this.conPsd) {
						uni.showToast({
							title: '请确认密码',
							icon: 'none',
						})
						return
					}

					if (this.password != this.conPsd) {
						uni.showToast({
							title: '两次密码不相同',
							icon: 'none'
						})
						return
					}

					if (this.password.length < 6 || this.conPsd.length < 6) {
						uni.showToast({
							title: '密码长度至少六位数',
							icon: 'none'
						})
						return
					}

					if (this.setPassWordType == 1) {
						this.wordLogin(1)
						return
					}


					const obj = {
						phone: this.phone,
						psd: this.password
					}
					uni.navigateTo({
						url: '/pages/login/aid?data=' + JSON.stringify(obj)
					})
				}, 4000)


			}
		},
		onLoad(option) {
			// console.log('option===',option)

			// console.log('=====',JSON.parse(option.data))

			const data = JSON.parse(option.data)

			this.setPassWordType = data.type
			this.words = data.words

			this.phone = option.phone
		}

	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		height: 100vh;
		background: url('../../static/img/sign-01.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;

		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.back {
					color: #333;
					font-size: 28rpx;

					image {
						width: 20rpx;
						height: 37rpx;
					}
				}

				.j-txt {
					color: #3F93FF;
					font-size: 30rpx;
				}

			}
		}

		.main {
			padding: 0 30rpx;

			.banner {
				width: 100%;
				margin-top: 40rpx;
			}


			.bar-im {
				margin-top: 44rpx;

				.bar-tit {
					display: flex;
					align-items: center;

					image {
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}

				.bar-num {
					padding: 0 30rpx;
					height: 80rpx;
					margin-top: 30rpx;
					background: #F8F8F8;
					border-radius: 10rpx;

					input {
						height: 100%;
					}
				}
			}

			.foot-btn {
				margin-top: 110rpx;
				padding: 0 20rpx;

				view {

					line-height: 80rpx;
					background: #3F93FF;
					border-radius: 40rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}
</style>